<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
    <head>
        <title>Tigua Clock</title>
        <meta http-equiv="content-language" content="en">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta name="author" content="David M. Lopez">
        <meta name="description" content="Canvas JavaScript Library">
        <meta name="keywords" content="JavaScript Library, Tigua, Canvas">
        <meta name="viewport" content="width=450; user-scalable=no">
        <script src="../tigua.js" type="text/javascript" charset="utf-8"></script>

        <script>

        function startup() {

          //create canvas object passing in id of canvas tag in page
          var c = new tigua.canvas('cnvs');

          //set background of canvas to white
          c.setBackground("#FFFFFF");

          //define a clock component
          function clock(config) {
              //call superclass constructor
              tigua.component.call(this,config);

              //provide defaults if some attributes aren't provided
              if (!this.hcolor) this.hcolor = new tigua.color({r:170,g:170,b:170});
              if (!this.color) this.color = new tigua.color({r:0,g:0,b:255});
              if (!this.radius) this.radius = 100;
              
              //define the second,minute and hour radii
              this.sradius = this.radius;
              this.mradius = this.radius*0.66;
              this.hradius = this.radius*0.33;
              
              //calculate font size
              var font_size = this.radius*.20; 
              
              //define the text components for the labels 
              this.hour_text = new tigua.text({
                 text: '',
                 scolor: new tigua.color({r:150,g:150,b:150}),
                 stroke:true,
                 x:this.radius*0.16666,
                 y:-font_size/2,
                 fontSize: font_size,
                 textAlign: 'center'
              });
              this.minute_text = new tigua.text({
                 text: '',
                 scolor: new tigua.color({r:150,g:150,b:150}),
                 stroke:true,
                 x:this.radius*0.5,
                 y:-font_size/2,
                 fontSize: font_size,
                 textAlign: 'center'
              });
              this.second_text = new tigua.text({
                 text: '',
                 scolor: new tigua.color({r:150,g:150,b:150}),
                 stroke:true,
                 x:this.radius*0.8333,
                 y:-font_size/2,
                 fontSize: font_size,
                 textAlign: 'center'
              });
              this.month_text = new tigua.text({
                 text: '',
                 scolor: new tigua.color({r:150,g:150,b:150}),
                 stroke:true,
                 x:-this.radius*0.8333,
                 y:-font_size/2,
                 fontSize: font_size,
                 textAlign: 'center'
              });
              this.day_text = new tigua.text({
                 text: '',
                 scolor: new tigua.color({r:150,g:150,b:150}),
                 stroke:true,
                 x:-this.radius*0.5,
                 y:-font_size/2,
                 fontSize: font_size,
                 textAlign: 'center'
              });
          }
          //init prototype to superclass
          clock.prototype = new tigua.component;
          
          //define methods
          clock.prototype.renderDisk = function (ctx,radius,endAngle) {
            ctx.beginPath();
            
            var lineargradient = ctx.createRadialGradient(0,0,0,0,0,radius);
            lineargradient.addColorStop(0,this.hcolor);  
            lineargradient.addColorStop(1,this.color);
            
            ctx.fillStyle = lineargradient;//color.toString();
            ctx.moveTo(0,0);
            ctx.arc(0, 0, radius, -Math.PI/2, endAngle-Math.PI/2,false);
            ctx.moveTo(0,0);
            ctx.fill();
          }
          //every component must define render function
          clock.prototype.render = function (ctx,canvas) {
            var now  = new Date();
            var month= now.getMonth()+1;
            var day  = now.getDate();
            var sec  = now.getSeconds();
            var min  = now.getMinutes();
            var hour = now.getHours();
            if (hour > 11) hour=hour-12;
            if (hour == 0) hour=12;
            //hour = 3;
            
            ctx.shadowOffsetX = 3;
            ctx.shadowOffsetY = 3;
            ctx.shadowBlur = 2;
            ctx.shadowColor = "rgba(0, 0, 0, 0.45)";
            
            this.renderDisk(ctx,this.sradius,Math.PI*2*(sec/60));
            this.renderDisk(ctx,this.mradius,Math.PI*2*(min/60));
            this.renderDisk(ctx,this.hradius,Math.PI*2*(hour/12));            
                        
            ctx.shadowOffsetX = 0;
            ctx.shadowOffsetY = 0;
            ctx.shadowBlur = 0;
            ctx.globalAlpha = 0.25;  
            for (var i=0;i<60;i+=1) 
            {
              ctx.rotate(Math.PI*2*(1/60));
              ctx.beginPath();
              ctx.fillStyle = "#000000";
              ctx.strokeStyle = "#000000";
              ctx.moveTo(0,-this.hradius);
              ctx.lineTo(0,-this.sradius);
              ctx.stroke();
            }
            ctx.globalAlpha = 0.5;
            ctx.lineWidth = 2; 
            for (var i=0;i<12;i+=1) 
            {
              ctx.rotate(Math.PI*2*(1/12));
              ctx.beginPath();
              ctx.fillStyle = "#000000";
              ctx.strokeStyle = "#000000";
              ctx.moveTo(0,-this.mradius);
              ctx.lineTo(0,-this.sradius);
              ctx.stroke();
            }
            ctx.globalAlpha = 0.8;
            ctx.lineWidth = 4; 
            for (var i=0;i<4;i+=1) 
            {
              ctx.rotate(Math.PI*2*(1/4));
              ctx.beginPath();
              ctx.fillStyle = "#000000";
              ctx.strokeStyle = "#000000";
              ctx.moveTo(0,-this.mradius);
              ctx.lineTo(0,-this.sradius);
              ctx.stroke();
            }
            
            ctx.globalAlpha = 1;
            ctx.lineWidth = 1; 
            ctx.shadowOffsetX = 3;
            ctx.shadowOffsetY = 3;
            ctx.shadowBlur = 2;
            ctx.shadowColor = "rgba(0, 0, 0, 0.45)";
            
            if (hour < 10) this.hour_text.text = "0"+hour;
            else this.hour_text.text = ""+hour;
            this.hour_text.doRender(ctx,canvas);
            
            if (min < 10) this.minute_text.text = "0"+min;
            else this.minute_text.text = ""+min;
            this.minute_text.doRender(ctx,canvas);
            
            if (sec < 10) this.second_text.text = "0"+sec;
            else this.second_text.text = ""+sec;
            this.second_text.doRender(ctx,canvas);
            
            if (month < 10) this.month_text.text = "0"+month;
            else this.month_text.text = ""+month;
            this.month_text.doRender(ctx,canvas);
            
            if (day < 10) this.day_text.text = "0"+day;
            else this.day_text.text = ""+day;
            this.day_text.doRender(ctx,canvas);
          }
                 
         //create instance of clock and add it to canvas
         var h = 60;
         var clck = new clock({
             x:200,
             y:200,
             radius: 200,
             color: new tigua.color({h:h,s:80,v:80}),
             hcolor: new tigua.color({h:h-90,s:80,v:80}),
         });

         c.addComponent(clck);
         
         //start animating, 2 frames per second
         c.startAnimation(500);
       }
        </script>
    </head>
    <body onload="startup();">
      <canvas id="cnvs" width="400" height="400"></canvas>
    </body>
</html>
